<template>
    <div class="person-info">
        <van-field
                v-model="userInfo.nickname"
                label="昵称"
                type="text"
                placeholder="请输入"
                input-align="right"
        />
        <van-cell :value="userInfo.sex" is-link @click="showGender = true">
            <template slot="title">
                <span class="custom-title">性别</span>
            </template>
        </van-cell>
        <van-field
                class="four"
                v-model="userInfo.phone"
                label="手机号"
                type="tel"
                placeholder="请输入"
                input-align="right"
        />

        <van-popup v-model="showGender" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="columns"
                    @cancel="showGender = false"
                    @confirm="handleConfirmGender"
            />
        </van-popup>

        <div class="fixed-bottom">
            <van-button type="info" @click="handleSubmit">保存</van-button>
        </div>
    </div>
</template>
<script>
    import format from 'date-fns/format';
    import https from "../https";
    import { userUpdate } from "../constants/api"
    import { Toast, Notify } from "vant";
    export default {
        components: {
        },
        data() {
            return {
                nickname: '',
                showGender: false,
                gender: '请选择',
                columns: ['男', '女'],
                userInfo: {},
                dict:{
                    '男': 1,
                    '女': 2,
                }
            }
        },
        mounted() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.userInfo.sex = this.userInfo.sex == 1 ? '男' : (this.userInfo.sex == 2 ? '女' : '未知');
        },
        methods: {
            handleConfirmGender(val) {
                this.userInfo.sex = val;
                this.showGender = false
            },
            async handleSubmit() {
                const json = await https.fetchPost(userUpdate, {...this.userInfo, sex: this.dict[this.userInfo.sex]});
                if (json.data.code === 200) {
                    Toast.success('保存成功');
                    setTimeout( () => {
                        this.$router.back()
                    }, 2000)
                } else {
                    Notify({ type: 'warning', message: json.data.data.errMsg });
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .person-info {

    }
    .person-info > div {
        &:last-child {
            &::after {
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 0;
                bottom: 0;
                left: 0px;
                border-bottom: 1px solid #ebedf0;
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
            }
        }
    }

    .fixed-bottom {
        width: 100%;
        height: 1.26rem;
        line-height: 1.26rem;
        text-align: center;
        box-shadow:0px -.03rem .1rem 0px rgba(220, 252, 240, 0.35);
        margin-top: .67rem;
    }
</style>

